<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '自选区',
  },
}
</route>
<template>
  <view style="padding-bottom: 40rpx">
    <view class="wrap">
      <!--刘海处理-->
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <!--导航栏-->
      <view class="navbar">
        <wd-navbar title="加仓区域" :bordered="false"></wd-navbar>
      </view>

      <view>
        <wd-search
          v-model="searchStr"
          @clear="change"
          @change="change"
          :maxlength="20"
          hide-cancel
        />
      </view>

      <!--账户类型-->
      <!-- <view class="account-type">
        <view class="account-type-left"> -->
      <!-- <view class="account-type-left-item account-type-left-item-active">全部</view> -->
      <!-- <view
            class="account-type-left-item"
            v-for="i in groupList"
            :key="i"
            :class="
              i.id === groupId ? 'account-type-left-item-active' : 'account-type-left-item-default'
            "
            @click="onClickGroup(i)"
          >
            {{ i.name }}
          </view> -->
      <!-- </view> -->
      <!-- </view> -->
      <!--表头-->
      <view class="list">
        <view class="list-title-box">
          <wd-row>
            <wd-col :span="12">
              <view style="display: flex; align-items: center">
                <view>基本信息</view>
              </view>
            </wd-col>
            <wd-col :span="6">
              <view @click="onClickRate" style="display: flex; float: right; align-items: center">
                <view>单位涨幅</view>
                <view>
                  <image
                    v-if="orderRate == '' || orderRate == 'other'"
                    src="../../static/sort.png"
                    style="width: 12px; height: 12px"
                  />
                  <image
                    v-else-if="orderRate == 'asc'"
                    src="../../static/sort-up.png"
                    style="width: 12px; height: 12px"
                  />
                  <image
                    v-else-if="orderRate == 'desc'"
                    src="../../static/sort-down.png"
                    style="width: 12px; height: 12px"
                  />
                </view>
              </view>
            </wd-col>
            <wd-col :span="6">
              <view @click="onClickTip" style="display: flex; float: right; align-items: center">
                <view>提示</view>
                <view>
                  <image
                    v-if="orderTip == ''"
                    src="../../static/sort.png"
                    style="width: 12px; height: 12px"
                  />
                  <image
                    v-else-if="orderTip == 'asc'"
                    src="../../static/sort-up.png"
                    style="width: 12px; height: 12px"
                  />
                  <image
                    v-else
                    src="../../static/sort-down.png"
                    style="width: 12px; height: 12px"
                  />
                </view>
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>
    </view>

    <scroll-view scroll-y @scrolltolower="handleUpLoad">
      <!--列表-->
      <view class="list-con">
        <!--骨架屏-->
        <view v-if="showLoadingView">
          <wd-skeleton v-for="i in 5" :key="i" theme="paragraph" style="margin-bottom: 10rpx" />
        </view>

        <!--空数据提示-->
        <wd-status-tip
          image="../../static/content.png"
          tip="暂未添加自选基金"
          v-else-if="!showLoadingView && dataList.length == 0"
        />
        <!--列表-->
        <view v-else class="list-content" v-for="i in dataList" :key="i" @click="onClickItem(i)">
          <wd-row>
            <wd-col :span="12">
              <view class="list-content-box">
                <view class="list-content-box-top">{{ i.name }}</view>
                <view class="list-content-box-bottom">
                  <view>
                    <wd-tag color="#6f717a" bg-color="#f6f8fb" type="primary">
                      {{ i.code }}
                    </wd-tag>
                  </view>
                  <view style="margin-left: 8rpx">
                    <wd-tag color="#6f717a" bg-color="#f6f8fb" type="primary">
                      {{ i.type }}
                    </wd-tag>
                  </view>

                  <view style="margin-left: 8rpx" v-if="i.customize_tag">
                    <wd-tag color="#6f717a" bg-color="#f6f8fb" type="primary">
                      {{ i.customize_tag }}
                    </wd-tag>
                  </view>

                  <view v-if="i.v_date == i.e_date" style="margin-left: 8rpx">
                    <wd-tag color="#ffad6f" bg-color="#fff0e5">已更新</wd-tag>
                  </view>
                </view>
              </view>
            </wd-col>
            <wd-col :span="6">
              <view class="list-content-box" style="float: right">
                <view
                  class="list-content-box-top"
                  style="font-weight: 500; justify-content: right"
                  :style="{ color: i.show_rate >= 0 ? 'red' : 'green' }"
                >
                  {{ i.show_rate >= 0 ? '+' + i.show_rate.toFixed(2) : i.show_rate.toFixed(2) }}%
                </view>
                <view class="list-content-box-bottom list-content-box-bottom-date">
                  <text style="margin-right: 2px" v-if="i.show_is_estimate == '是'">估值 |</text>
                  {{ i.show_is_estimate == '是' ? i.e_date : i.v_date }}
                </view>
              </view>
            </wd-col>
            <wd-col :span="6">
              <view class="list-content-box">
                <view
                  class="tip-box"
                  style="background-color: #f6f8fb; color: #6f717a"
                  v-if="i.tip == '观望区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #edfbe0; color: #00bf00"
                  v-else-if="i.tip == '减仓区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #fef2ef; color: red"
                  v-else-if="i.tip == '加仓区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #fcf5de; color: #dfa950"
                  v-else-if="i.tip == '危险区'"
                >
                  {{ i.tip }}
                </view>

                <view class="tip-box" style="background-color: #e7edff; color: #3379fb" v-else>
                  {{ i.tip }}
                </view>
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>

      <view
        style="text-align: center; padding: 20rpx 0px; background-color: #fff"
        @click="onClickMore"
        v-if="current < pages"
      >
        查看更多
      </view>

      <view
        style="padding-top: 20rpx"
        v-if="dataList.length > 0 && current == pages && !showLoadingView"
      >
        <wd-divider dashed>已经到底啦</wd-divider>
      </view>
    </scroll-view>

    <!--弹窗-->
    <wd-message-box />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import { useMessage } from 'wot-design-uni'
defineOptions({
  name: 'hold',
  options: {
    styleIsolation: 'shared',
  },
})
// key
const tipKey = ref(0)
// 数据列表
const dataList = ref([])
// 每页显示数量
const pageSize = ref(80)
// 当前页
const current = ref(1)
// 总页数
const pages = ref(0)
// 高度
const statusBarHeight = ref(15)
// 提示排序
const orderTip = ref('')
// 涨幅排序
const orderRate = ref('')
// 显示加载中的段落
const showLoadingView = ref(true)
// 分组名称
const groupName = ref('')
// 弹窗
const message = useMessage()
// 所属分组
const groupId = ref('')
// 分组列表
const groupList = ref([])
// 定时任务
const timer = ref(null)
const searchStr = ref('')

/**
 * 加载数据
 */
const loadData = () => {
  // 需实现无感刷新，则无需每次都先loading页面
  // showLoadingView.value = true
  // 参数
  const params = {
    pageNo: current.value,
    pageSize: pageSize.value,
    orderTip: orderTip.value,
    orderRate: orderRate.value,
    groupId: groupId.value,
    name: searchStr.value,
  }
  http.get('/sys/fund/library/addPage', params).then((res: any) => {
    if (res.success) {
      // 数据列表
      const records = res.result.records
      // 直接赋值，因为没有设置分页操作，所以直接赋值即可
      if (current.value === 1) {
        dataList.value = records
      } else {
        records.forEach((i) => {
          dataList.value.push(i)
        })
      }
      // 将显示loading的操作直接关闭
      showLoadingView.value = false
      pages.value = res.result.pages
    }
  })
}

const change = () => {
  current.value = 1
  loadData()
}

/**
 * 上拉加载
 */
const handleUpLoad = () => {
  // 显示正在加载的操作
  showLoadingView.value = true
  loadData()
}

/**
 * 点击新增自选按钮
 */
const onClickMore = () => {
  if (current.value < pages.value) {
    current.value += 1
    loadData()
  }
}

// 点击分组
const onClickGroup = (data) => {
  groupId.value = data.id
  loadData()
}

// 点击提示
const onClickTip = () => {
  if (orderTip.value === '') {
    orderTip.value = 'desc'
    orderRate.value = 'other'
  } else if (orderTip.value === 'desc') {
    orderTip.value = 'asc'
    orderRate.value = 'other'
  } else if (orderTip.value === 'asc') {
    orderTip.value = ''
    orderRate.value = ''
  }
  loadData()
}

// 加载分组列表
const loadGroupList = () => {
  http.get('/sys/fund/optional/groupList').then((res: any) => {
    if (res.success) {
      // groupList.value = res.result
      groupList.value.unshift({ id: '', name: '全部' })
      // 如果原先选择的数据项，没有了，则使用默认的
      const groupItem = groupList.value.find((item) => item.id === groupId.value)
      if (!groupItem) {
        groupId.value = ''
      }
      // 加载数据
      loadData()
    }
  })
}

// 单位涨幅
const onClickRate = () => {
  if (orderRate.value === '' || orderRate.value === 'other') {
    orderRate.value = 'desc'
  } else if (orderRate.value === 'desc') {
    orderRate.value = 'asc'
  } else if (orderRate.value === 'asc') {
    orderRate.value = ''
  }

  orderTip.value = ''
  loadData()
}

// 点击 栏目
function onClickItem(data) {
  uni.navigateTo({
    url:
      '/pages/detail/detail?code=' +
      data.code +
      '&fundId=' +
      data.id +
      '&optId=' +
      data.id +
      '&lineType=default',
  })
}

// 刷新数据
const refreshData = () => {
  // 默认加载分组
  loadGroupList()
  // 刷新提示
  tipKey.value += 1
}

onLoad(() => {
  const SYSTEM_INFO = uni.getSystemInfoSync()
  statusBarHeight.value = SYSTEM_INFO.statusBarHeight
})

onMounted(() => {
  // 默认加载数据
  refreshData()
})
</script>

<style lang="scss" scoped>
.wrap {
  // background: linear-gradient(to bottom, #daf0fe, #f9fbfb);
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  .navbar {
    :deep(.wd-navbar__title) {
      color: #000;
    }
    :deep(.wd-navbar) {
      background-color: transparent;
      --wot-navbar-title-font-weight: 400;
      --wot-navbar-arrow-size: 36rpx;
      --wot-navbar-desc-font-size: 14px;
      --wot-navbar-title-font-size: 16px;
    }
  }
  .account-type {
    width: 100vh;
    padding: 0px 16rpx;
    display: flex;
    justify-content: space-between;
    .account-type-left {
      display: flex;
      .account-type-left-item {
        font-size: 22rpx;
        padding: 8rpx 18rpx;
        border-radius: 20rpx;
        margin: 0px 8rpx;
        font-weight: 500;
        border: 1px solid #f2f2f2;
      }
      .account-type-left-item-active {
        color: #fff;
        background-color: #0083ff;
      }
      .account-type-left-item-default {
        color: #505b64;
        background-color: #fff;
      }
    }
  }
  .list {
    padding: 10rpx 20rpx;
    background-color: #fff;
    .list-title-box {
      text-align: right;
      // padding: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #f2f2f2;
      color: #505b64;
      background-color: #fff;
      font-size: 28rpx;
    }
  }
}
.list-con {
  padding: 10rpx 20rpx;
  background-color: #fff;
  .list-content {
    border-bottom: 1px solid #f2f2f2;
    padding: 16rpx 0px;
    color: #262628;
    .list-content-box {
      .list-content-box-top {
        display: flex;
        align-items: center;
      }
      .list-content-box-bottom {
        margin-top: 8rpx;
        display: flex;
        align-items: center;
        font-size: 18rpx;
      }
      .list-content-box-bottom-date {
        float: right;
        color: #bfc0c9;
      }
      .tip-box {
        width: 65%;
        float: right;
        background-color: #d0e8ff;
        color: #0083ff;
        text-align: center;
        padding: 8rpx 0px;
        border-radius: 5px;
        margin-top: 12rpx;
        font-size: 20rpx;
      }
    }
  }
}
</style>
